<template>
	<Page :config='pageConfig'>
		<Modal ref='modalRef' subTitle='123'>
			弹窗内容
			<template #title-after>
				<span class='g9 ml20'>紧跟之后</span>
			</template>
			<template #title-right>
				<div class='ex fxr rel'>
					<Button mode='set' type='text' class='dropdown-box' />
					<div class='abs_rt bcf bor1 p10 r5px no-event' style='width:200px;height:200px;top:33px;z-index:1' :hidden='!show' @click.stop=''>
						下拉框内容
					</div>
				</div>
			</template>
		</Modal>
	</Page>
</template>

<script setup>
	const Page			= $.lazy(()=>import('#tp/content/page-content.vue'))
	const Modal 		= $.lazy(()=>import('@antd/modal.vue'))
	const Button 		= $.lazy(()=>import('@antd/button.vue'))
	/* ---------------------------  提交表单 --------------------------- */
	
	let modalRef = $ref()
	let show = $ref(true)
	
	const pageConfig = {
		title: '自定义弹窗',
		controls	: [
			{ label:'打开弹窗', click:()=>modalRef.open()}
		]
	}
	
	$fn.onHideShow('dropdown-box', show, v => show = v )
</script>